  <template>
  <el-container>
    <el-header>
      <Pagetitle :title="title1" :SecTitle="title2"></Pagetitle>
    </el-header>

    <el-main style="padding: 10px 0px; border-radius: 5px">
      <el-main class="search">
        <span>时间</span>
        <el-date-picker
          v-model="date"
          type="date"
          placeholder="选择日期"
          value-format="timestamp"
        >
        </el-date-picker>
        <span>标题</span>
        <el-input
          v-model="input_title"
          placeholder="请输入标题"
          style="width: 200px"
        ></el-input>
        <span>发布人</span>
        <el-input
          v-model="input_publisher"
          placeholder="请输入发布人"
          style="width: 200px"
        ></el-input>
        <el-button type="primary" style="margin: 0px 10px" @click="searchData"
          >查询</el-button
        >
        <el-button
          type="primary"
          style="margin: 0px 10px; float: right"
          @click="addbtn"
          >发布</el-button
        >
      </el-main>
      <el-table :data="tableData" style="width: 100%; padding: 10px 10px">
        <el-table-column prop="title" label="消息标题" width="180">
        </el-table-column>
        <el-table-column prop="type" label="消息类型" width="100">
        </el-table-column>
        <el-table-column prop="time" label="发布时间"> </el-table-column>
        <el-table-column prop="publisher" label="发布人"> </el-table-column>
        <el-table-column prop="operation" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              type="info"
              size="mini"
              plain
              @click="seeInfoBtn(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="发布" :visible.sync="dialogFormVisible" center>
        <el-form :model="form">
          <el-form-item label="标题：" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型：" :label-width="formLabelWidth">
            <el-select v-model="form.type" placeholder="请选择类型">
              <el-option
                v-for="item in typelistdata"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内容：" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSure">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="查看" :visible.sync="InfoDialogTableVisible" center>
        <el-descriptions title="" :column="1" border>
          <el-descriptions-item label="标题">{{
            seeInfoTable.title
          }}</el-descriptions-item>
          <el-descriptions-item label="类型">{{
            seeInfoTable.type
          }}</el-descriptions-item>
          <el-descriptions-item label="内容">{{
            seeInfoTable.content
          }}</el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button @click="InfoDialogTableVisible = false">返回</el-button>
        </div>
      </el-dialog>
    </el-main>

    <el-main style="padding: 10px 0px">
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>
    </el-main>
  </el-container>
</template>
<style lang="less" scoped>
.search {
  background-color: #fff;
  margin-top: 10px;
  & > span {
    padding: 0px 10px;
  }
}
</style>
  <script>
import Paging from "../../components/paging/paging.vue";
import Pagetitle from "../../components/common/title.vue";
export default {
  data() {
    return {
      tableData: [],
      typelistdata: [],
      title1: "消息系统",
      title2: "消息管理",
      currentPage: 1, //当前页数
      total: 5, //总共多少条，这个需要通过接口获取后赋值
      pagesize: 4, //有2，4，6，8，10可选
      date: "",
      input_title: "",
      input_publisher: "",
      dialogFormVisible: false,
      InfoDialogTableVisible: false,
      form: {
        title: "",
        content: "",
        date1: "",
        date2: "",
        delivery: false,
        type: "",
        resource: "",
        desc: "",
      },
      seeInfoTable: {
        title: "",
        style: "",
        title: "",
      },
      formLabelWidth: "120px",
    };
  },
  components: {
    Pagetitle,
    Paging,
  },
  methods: {
    //子组件传入pagesize
    getPagesize(val) {
      this.pagesize = val;
      console.log(this.pagesize);
      this.getListData(
        this.currentPage,
        this.pagesize,
        this.date,
        this.input_title,
        this.input_publisher
      );
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
     this.currentPage = val;
      console.log(this.currentPage);
      
      this.getListData(
        this.currentPage,
        this.pagesize,
        this.date,
        this.input_title,
        this.input_publisher
      );
    },
    //获取页面
    async getListData(page, pagesize, time, title, publisher) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/MessageManagement/list",
        typelistdata: [],
        data: {
          page: page,
          pageSize: pagesize,
          publisher: publisher,
          time: time,
          title: title,
        },
       
      });
      console.log(res);
      if (res.code == 0) {
        this.total = res.count;
        res.data.forEach((item) => {
          // console.log(item);
          let newTime = this.timeTransfer(item.time);
          item.time = newTime;
        });
        //this.tableData.splice(0, this.tableData.length);
        // res.data.forEach((item) => {
        //   // console.log(item);
        //   let newTime = this.timeTransfer(item.created);
        //   item.created = newTime;
        //   item.status = this.statusTransfer(item.status);
        // });
        // console.log(res.data)
        this.tableData = res.data;
        
      }
    },

    timeTransfer(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },

    seeInfoBtn(index, row) {
      this.InfoDialogTableVisible = true;
      this.seeInfo(row.id);
    },
    //查看接口
    async seeInfo(seeId) {
      const { data: res } = await this.axios({
        method: "GET",
        url: "/MessageManagement/" + seeId,
        
      });
      // console.log(res.data);
      if (res.code == 0) {
        this.seeInfoTable.title = res.data.title;
        this.seeInfoTable.type = res.data.type;
        this.seeInfoTable.content = res.data.content;
      }
    },
    //点击添加按钮
    addbtn() {
      this.dialogFormVisible = true;
      this.getData();
    },
    //添加接口
    async addData(content, title, type, timestamp) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/MessageManagement/add",
        data: {
          content: content,
          time: timestamp,
          title: title,
          type: type,
        },
       
      });
      if (res.code == 0) {
        this.getListData(this.currentPage, this.pagesize);
      }
      console.log(res);
    },
    //获取消息类型
    async getData() {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/messageType/findByWhere",
        
      });
      if (res.code == 0) {
        this.typelistdata = res.data;
      }
      console.log(res);
    },
    addSure() {
      var timestamp = new Date().getTime();
      this.dialogFormVisible = false;
      this.addData(
        this.form.content,
        this.form.title,
        this.form.type,
        timestamp
      );
      (this.form.content = ""), (this.form.title = ""), (this.form.type = "");
    },
    searchData() {
      this.getListData(
        this.currentPage,
        this.pagesize,
        this.date,
        this.input_title,
        this.input_publisher
      );
    },
  },

  created() {
    this.getListData(this.currentPage, this.pagesize);
  },
};
</script>